<template>
<div class="wrapper">
     <div class="top">
        <img src="../assets/小于号.png">
        <div class="title"> 确认订单</div>
    </div>
    <div class="aa">
        <div class="aa1" @click="changeAddress">
            <div class="text">收货地址</div>
            <div class="card" v-for="(itemm,index) in selectAddress" :key="index">
                <div class="wrap">
                    <div class="info2">
                        <div>
                            <span class="school">{{itemm.school}}</span>
                            <span class="number">{{itemm.number}}</span>
                        </div>
                    </div>
                    <div class="info">
                        <span class="name">{{itemm.name}}（女士）</span>
                        <span class="phone">{{itemm.phone}}</span>
                    </div>
                </div>
                <img src="../assets/大于.png">
            </div>
        </div>

        <div class="card2">
            <span class="cardTitle">{{this.sales.sales.name}}</span>
            <div v-for="(item,index) in cart" :key="index"  v-show="index<2 || item.show">
                <div class="cardwrap">
                    <div class="cardGoods" >
                    <div class="cardImg">
                        <img :src="item.img" class="img">
                    </div>
                    <div class="cardContent">
                        <span class="goodsName">{{item.goodsName}}</span>
                        <div class="price">
                        <span class="price1">￥{{item.price}}*{{item.amount}}</span>
                        <span class="price2">￥{{(item.price*item.amount).toFixed(2)}}</span>
                        </div>
                    </div>
                    </div>
                </div>
               
            </div>
            <div class="total" v-if="this.cart.length>2" @click="show(this.cart)">
                    <span>共计{{this.amount1}}件/3.2kg</span>
                    <img src="../assets/下拉.png">
                    </div>
            </div>
        </div>

        <div class="bottom">
            <div class="jiage">实付金额￥{{this.total}}</div>
            <div class="tijiao" @click="queren">提交订单</div>
        </div>
       
</div>
    <commitOrder/>
    <pay/>
</template>

<script>
import commitOrder from '@/components/commitOrder.vue'
import pay from '@/components/pay.vue'
import {mapState,mapGetters,mapMutations} from 'vuex'

   export default{
    name: 'OrderView',
    components: {
         commitOrder,
         pay
    },
    data(){
      return {
        
       
      }
    },
    created(){
       console.log(this.selectAddress)
    },
    computed:{
        ...mapState(['tijiao','cart','sales','amount1','total','address']),
        ...mapGetters(['selectAddress'])
    },
    methods:{
        queren(){
            this.$store.state.tijiao=true
        },
       show(thing){
            thing.forEach(thing=>{
            thing.show=!thing.show;
            })
      },
      changeAddress(){
        this.$router.push('/address')
      },
    //   fan(){
    //     this.$router.push('/saleinfo:id')
    //   }
    }
   }
</script>

<style lang="scss" scoped>
.wrapper{
    position:absolute
}
.aa{
    background-color:#f1f1ee;
    height:79.7vh;
}
.aa1{
     background-color: white;
    width: 92vw;
    border-radius: 2vw;
    margin: 0 auto;
    margin-bottom:5vw;
    margin-top: -21vw;
    position: relative;
}
.top{
    background-image: linear-gradient(#3A6FF3, #50C7FB, #f1f1ee);
    height: 24vh;
    display: flex;
    position: relative;
    img{
            width: 8vw;
            height: 8vw;
            margin: 5vw;
    }
}
.title{
    font-size: 6vw;
    color: white;
    margin-top: 5vw;
    margin-left: 20vw;
}
.text{
    font-size:5vw;
    padding-top: 4vw;
    margin-left: 5vw;
}

.bottom{
    height:8vh;
    background-color:white;
    width:100vw;
    display:flex;
    align-items:center;
   .jiage{
            margin-left: 5vw;
            font-weight: 540;
            width: 70vw;
   }
   .tijiao{
            background-color: #1296db;
            width: 30vw;
            color: white;
            height: 8vh;
            text-align: center;
            line-height: 8vh;
   }
}
.card{
        display:flex;
       
        .wrap{
            display:flex;
            flex-direction:column;
            width: 82vw;
        }
        .info{
            display:flex;
            margin-top:-1.5vw;
            margin-bottom: 3vw;
            .name{
                margin-left: 5vw;
                color: #ccc;
                margin-top: 3vw;
            }
            .phone{
                color: #ccc;
                margin-left: 2vw;
                margin-top: 3vw;
                line-height: 6vw;
            }
        }
        .info2{
            display: flex;
            margin: 3vw 0vw 0vw 5vw;
        }
        img{
            width:8vw;
            height:8vw;
        }
    }
 .card2{
    background: white;
    width: 84vw;
    margin: 0 auto;
    border-radius: 2vw;
    padding: 4vw;
    margin-bottom: 3vw;
    .cardTitle{
      font-size:5vw;
    }
    .cardwrap{
      display:flex;
      flex-direction:column;
    }
    .cardGoods{
      display:flex;
      justify-content:space-between;
      margin-top: 3vw;
      .cardImg{ 
        .img{
          width:15vw;
          height:15vw;
        }
      }
      .cardContent{
        display:flex;
        flex-direction:column;
        width: 65vw;
        .goodsName{
          font-size:4.5vw;
        }
        .price{
          font-size:4vw;
          margin-top: 3vw;
          display:flex;
          justify-content:space-between;
          .price1{
            color:red;
          }
          
        }
      }
    }
    .total{
          display: flex;
          width: 84vw;
          height: 7vw;
          background-color: #f5f5f4;
          justify-content: center;
          margin: 0 auto;
          border-radius: 1.5vw;
          margin-top: 2vw;
          line-height: 7vw;
      img{
          width: 5vw;
          height: 5vw;
          margin-top: 1.5vw;
          margin-left: 1vw;
      }
      span{
        color:#cdcdcd;
      }
    }
  }


</style>